<template>
  <div>
    <van-calendar v-model="showDate" @confirm="onConfirm" />
    <van-popup
      v-model="show"
      position="left"
      class="fa"
      :style="{ height: '100%', width: '100%' }"
    >
      <div>
        <van-nav-bar
          title="发货通知"
          left-text="返回"
          left-arrow
          @click-left="onClickLeft"
        />
        <div class="client">
          <van-field
            label="客户名称："
            v-model="entity.CustomerName"
            disabled
            placeholder="请输入客户名称"
          >
          </van-field>
          <van-field
            label="单据日期："
            :value="entity.DocumDate"
            placeholder="请选择日期"
            @click="showDate = true"
          />

          <van-field
            v-model="entity.Address"
            label="地址"
            placeholder="请输入地址"
          />
          <van-field
            v-model="entity.ConsigneeName"
            label="收货人"
            placeholder="请输入收货人姓名"
          />
        </div>
        <div class="scrollBar">
          <div class="box" v-for="item in data" :key="item.Id">
            <div class="left">
              品名:<span class="font"
                >{{ item.ProductId }}/{{ item.cInvName }}</span
              >
            </div>

            <div class="left">
              规格:<span class="font">{{ item.cInvStd || "无" }}</span>
            </div>

            <span class="Fa">
              <span class="left">数量:</span>
              <van-stepper
                class="fontstepper"
                input-width="20px"
                v-model="item.Quantity"
              />
            </span>
          </div>
        </div>
      </div>
      <Myuser @customerChoice="Client" ref="myuser" />
      <Product @Product="Product" ref="product" />
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '5px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1
        }"
      >
        <van-button @click="Add" slot="button" type="info">添加产品</van-button>
        <van-button
          @click="close"
          slot="button"
          style="margin-left:8px"
          type="default"
          >关闭</van-button
        >
        <van-button
          @click="handleSubmit"
          style="margin-left:8px"
          slot="button"
          type="primary"
          >保存</van-button
        >
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Icon } from "vant";
import { Popup } from "vant";
import { AddressList } from "vant";

import {
  Row,
  Col,
  Cell,
  CellGroup,
  Stepper,
  Toast,
  NavBar,
  Calendar
} from "vant";
import { Field } from "vant";
//客户
import Myuser from "@/components/OwnUser.vue";
import Product from "@/components/Product.vue";
export default {
  components: {
    "van-stepper": Stepper,
    "van-calendar": Calendar,
    "van-nav-bar": NavBar,
    "van-icon": Icon,
    "van-popup": Popup,
    "van-row": Row,
    "van-address-list": AddressList,
    "van-field": Field,
    "van-col": Col,
    "van-cell": Cell,
    "van-cell-group": CellGroup,
    Myuser,
    Product
  },
  data() {
    return {
      date: "",
      showDate: false,
      entity: {},
      data: [],
      show: false,
      Id: ""
    };
  },

  methods: {
    formatDate(date) {
      var time = new Date(date);
      var y = time.getFullYear();

      return `${y}-${date.getMonth() + 1}-${date.getDate()}`;
    },
    onConfirm(date) {
      this.showDate = false;
      this.entity.DocumDate = this.formatDate(date);
    },
    handleSubmit() {
      var entityData = { ...this.entity };
      var DDND_List = [...this.data];
      entityData.DDND_List = DDND_List;
      console.log(entityData);
      this.http
        .post("/DeliveryManagement/DEL_DeliveryNoticeMain/SaveData", entityData)
        .then(resJson => {
          if (resJson.Success) {
            Toast(resJson.Msg);
            this.show = false;
          } else {
            Toast(resJson.Msg);
          }
        });
    },
    //返回
    onClickLeft() {
      this.show = false;
    },
    //选中的产品
    Product(a) {
      a.forEach(item => {
        this.data.push({
          ProductId: item.cInvCode,
          cInvName: item.cInvName,
          cInvCode: item.cInvCode,
          cInvStd: item.cInvStd
        });
      });
    },
    // 选择产品页面;
    Add() {
      this.$refs.product.openForm();
    },
    //关闭
    close() {
      this.show = false;
    },
    //本条客户的数据
    Client(a) {
      this.$set(this.entity, "CustomerName", a.cCusName);
      // console.log(this.entity.CustomerName);
      // this.entity.CustomerName = a.cCusName;
      this.entity.CustomerId = a.cCusCode;
    },
    //选择客户
    CustomerChoice() {
      this.$refs.myuser.openForm();
    },
    getDataList() {
      this.http
        .post("/DeliveryManagement/DEL_DeliveryNoticeMain/GetTheDataOfAll", {
          // PageIndex: this.pagination.current,
          // PageRows: this.pagination.pageSize,
          SortField: "Id",
          SortType: "desc",
          Search: {
            Condition: "Id",
            Keyword: this.Id
          }
        })
        .then(res => {
          if (res.Success) {
            this.entity = res.Data;
            this.$set(
              this.entity,
              "DocumDate",
              this.entity.DocumDate.substring(0, 10)
            );

            this.data = res.Data.DDND_List;
          } else {
            Toast(res.Msg);
          }
        });
    },
    init() {
      this.show = true;

      (this.data = []), (this.entity = {});
    },

    openForm(name, code) {
      this.init();
      this.entity.CustomerName = name;
      this.entity.CustomerId = code;
    }
  }
};
</script>

<style scoped>
.left {
  margin: 10px 0px 10px 15px;
  /* margin-left: 15px; */
}
.Fa {
  display: flex;
  justify-content: left;
}
.DeliveryFa {
  display: flex;
  justify-content: space-between;
}
.aa {
  text-align: right;
}
.left {
  margin-left: 15px;
}
.fontstepper {
  margin-left: 15px;
  line-height: 40px;
}
.font {
  margin-left: 15px;
  font-size: 18px;
}
.scrollBar {
  height: 550px;
  overflow: auto;
}
.close {
  position: "absolute";

  right: 0;
  bottom: 0;
  padding: "5px 16px";
  background: "#fff";
  text-align: right;
  z-index: 1;
}
.client {
  box-shadow: rgba(128, 128, 128, 0.1) 10px 10px 5px 5px;
}
.box {
  width: 95%;

  margin: 0 auto;

  border: 1px solid #ccc;

  margin-top: 20px;
  margin-bottom: 10px;
}
/* .Father {
  display: flex;
} */
</style>
